<template>
    <section style="position: absolute;top: 0;left: 0;right: 0;">
      <img src="../../assets/login/bg.png" style="width: 100%;height: 2rem;pointer-events: none;">
      <yd-cell-group>
        <yd-cell-item>
          <span slot="left"><img src="../../assets/login/user.png" style="width: .37rem;height: .5rem;margin-right: .27rem"></span>
          <yd-input slot="right" v-model="input3" ref="input3" required :show-required-icon="false" :show-success-icon="false" :show-error-icon="false" regex="mobile" placeholder="请输入手机号" ></yd-input>
        </yd-cell-item>
        <yd-cell-item>
          <span slot="left"><img src="../../assets/login/robot.png" style="width: .44rem;height: .5rem;margin-right: .2rem"></span>
          <yd-input slot="right"  :show-success-icon="false" v-model="input4" max="20" placeholder="证明你不是机器人"></yd-input>
          <img slot="right" id="txtMCodeImg" :src="yanzhengImg" @click="changeImg()">
        </yd-cell-item>
        <yd-cell-item>
          <span slot="left"><img src="../../assets/login/code.png" style="width: .42rem;height: .5rem;margin-right: .22rem"></span>
          <input type="text" slot="right" placeholder="请输入验证码" v-model="yanzhengId">
          <yd-sendcode slot="right"
                       v-model="start1"
                       @click.native="sendCode1"
                       type="warning"
          ></yd-sendcode>
        </yd-cell-item>
        <yd-cell-item>
          <span slot="left"><img src="../../assets/login/psd.png" style="width: .42rem;height: .5rem;margin-right: .22rem"></span>
          <yd-input slot="right" type="password" max="20" v-model="input1" ref="input1" :show-required-icon="false" :show-success-icon="false" :show-error-icon="false" required :regex="psdReg" placeholder="请输入6到20位数字或字母"></yd-input>
        </yd-cell-item>
        <yd-cell-item>
          <span slot="left"><img src="../../assets/login/psd.png" style="width: .42rem;height: .5rem;margin-right: .22rem"></span>
          <yd-input slot="right" type="password" max="20" v-model="input2" required  :show-required-icon="false" :show-success-icon="false" :show-error-icon="false"  placeholder="请确认密码"></yd-input>
        </yd-cell-item>
      </yd-cell-group>

      <div class="agree_ment">
        <img src="../../assets/api/chos.png" class="agree_img"  @click="chosTex()" v-if="showTex">
        <img src="../../assets/api/chos_no.png" class="agree_img" @click="chosTex()" v-else>
        <span>同意</span><span style="color: #21a8ee;" @click="agreeBtn()">《火炬网注册协议》</span>和<span style="color: #21a8ee;" @click="agreeBtn2()">《免责协议》</span>
      </div>

      <yd-button size="large" type="danger" style="margin-top: 2rem;width: 96%;margin-left: 2%;" @click.native="regisBtn()" :bgcolor="bgColor" color="#fff" >立即注册</yd-button>

    </section>
</template>

<script>
    export default {
        name: "registerPage",
        data(){
          return{
            start1:false,
            input1:'',
            input2:'',
            input3:'',
            input4:'',
            yanzhengId:'',
            psdReg:'/^[a-zA-Z0-9@_.]{6,20}$/',
            code:'',
            // intwo:false,
            yanzhengImg:window.g.apiUrl+'/util/imgVerifi.do',
            showTex:true,
            bgColor:'#ef4f4f',
          }
        },
      methods:{
        agreeBtn(){
          this.$router.push('/agreement_three');
        },
        agreeBtn2(){
          this.$router.push('/mianze');
        },
        chosTex(){
          if(this.showTex == true){
            this.showTex = false;
          }else{
            this.showTex = true;
          }
        },
        sendCode1(){
          const input3 = this.$refs.input3;
          if(input3.valid == false){
            this.$dialog.notify({
              mes: '请完善手机号',
              timeout: 1500,
            })
            return;
          }
          let that = this;

          that.$ajax.post(window.g.apiUrl+'/user/isPhone.do',JSON.stringify({
            phoneNum:that.input3,
          })).then((response)=> {
            if (response.data.code == 200) {
              that.$dialog.loading.open('发送中...');
              that.$ajax.post(window.g.apiUrl+'/util/message.do',JSON.stringify({
                phone:that.input3,
                flag:"1"
              })).then((response)=>{
                  setTimeout(() => {

                    that.$dialog.loading.close();

                    if(response.data.code == 200){
                      that.start1 = true;
                      that.$dialog.toast({
                        mes: '已发送',
                        icon: 'success',
                        timeout: 1500
                      });
                      that.code = response.data.data;
                    }else{
                      that.$dialog.toast({
                        mes: '验证码发送次数过多，请稍后重试',
                        icon:'error',
                        timeout: 1500,
                      });
                    }

                  }, 500);

                }).catch(()=>{
              });
            } else if(response.data.code == 503){
              that.$dialog.notify({
                mes: '该手机已被注册',
                timeout: 1500,
              })
            }else{
              that.$dialog.notify({
                mes: '发送失败，请稍后重试',
                timeout: 1500,
              })
            }
          }).catch(()=>{

          })

        },
        regisBtn(){
          if(this.showTex == false){
            return;
          }
          let that = this;
          const input1 = this.$refs.input1;
          const input3 = this.$refs.input3;

          if(input3.valid == false){
            this.$dialog.notify({
              mes: '请完善手机号',
              timeout: 1500,
            })
            return;
          }
          if(this.input4 == ''){
            this.$dialog.notify({
              mes: '请输入图文验证码',
              timeout: 1500,
            })
            return;
          }
          this.$ajax.post(window.g.apiUrl+'/util/isVer.do',JSON.stringify({
            code:this.input4,
          })).then((response)=> {
            if (response.data.code == 200) {

              if(that.yanzhengId == ''){
                that.$dialog.notify({
                  mes: '请输入验证码',
                  timeout: 1500,
                });
                return;
              }
              if(that.yanzhengId != this.code){
                that.$dialog.notify({
                  mes: '验证码输入有误',
                  timeout: 1500,
                });
                return;
              }
              if(input1.valid == false){
                that.$dialog.notify({
                  mes: '请完善密码',
                  timeout: 1500,
                });
                return;
              }
              if(that.input1 != that.input2){
                that.$dialog.notify({
                  mes: '两次密码输入不一致',
                  timeout: 1500,
                });
                return;
              }
              that.$dialog.loading.open('信息正在提交');
              setTimeout(()=>{

              that.$ajax.post(window.g.apiUrl+'/user/isPhone.do',JSON.stringify({
                phoneNum:that.input3,
              })).then((response)=>{
                if(response.data.code == 200){
                  that.$ajax.post(window.g.apiUrl+'/user/reg.do',JSON.stringify({
                    phoneNum:that.input3,
                    pass:that.input1,
                    channel:'1',
                  })).then((response)=>{
                    that.$dialog.loading.close();
                    if(response.data.code == 200){
                      that.$dialog.toast({
                        mes: '注册成功',
                        icon:'success',
                        timeout: 1000,
                        callback:()=>{
                          localStorage.setItem('userid',response.data.data);
                          var ua = navigator.userAgent.toLowerCase();
                          if(ua.match(/MicroMessenger/i)=="micromessenger") {
                            // window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx457a0fc52bf26f73&redirect_uri=' +
                            //   'https%3A%2F%2Fwww.hotdata.xyz%2Fhtml%2Findex.html%23%2Floginback&response_type=code&scope=snsapi_userinfo&state=LOGIN#wechat_redirect';//测试环境
                            window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxc196ae04865f5036&redirect_uri=https%3A%2F%2Fwww.huojudata.com%2Fhtml%2Findex.html' +
                              '%23%2Floginback&response_type=code&scope=snsapi_userinfo&state=LOGIN#wechat_redirect'//正式环境
                          }else{
                            that.$router.push('/index');
                          }
                        }
                      });
                    }else{
                      that.$dialog.toast({
                        mes: '注册失败，请稍后重试',
                        icon:'error',
                        timeout: 1500,
                      });
                    }
                  }).catch(()=>{
                  })
                }else if(response.data.code == 503){
                  that.$dialog.loading.close();
                  that.$dialog.toast({
                    mes: '该手机已被注册',
                    icon:'error',
                    timeout: 1500,
                  });
                }else{
                  that.$dialog.loading.close();
                  that.$dialog.toast({
                    mes: '注册失败，请稍后重试',
                    icon:'error',
                    timeout: 1500,
                  });
                }
              }).catch(()=>{
              })
              },150)
            } else {
              that.$dialog.notify({
                mes: '图文验证码错误',
                timeout: 1500,
              });
            }

          }).catch(()=>{

          })





        },
        changeImg(){
          this.$ajax.post(window.g.apiUrl+'/util/imgVerifi.do')
            .then((response)=>{
              this.yanzhengImg = response.config.url+"?t="+Date.now();
            }).catch(()=>{
          })
        },
      },
      watch:{
        // input2(){
        //   if(this.input2 == this.input1){
        //     this.intwo = true;
        //   }else{
        //     this.intwo = false;
        //   }
        // },
        showTex:function(val,oldVal){
          if(val == false){
            this.bgColor = '#e3e3e3';
          }else{
            this.bgColor = '#ef4f4f';
          }
        },
      },
    }
</script>

<style scoped>
  .agree_ment{
    font-size: 0.24rem;
    display: flex;
    align-items: center;
    margin-top: 0.3rem;
    justify-content: flex-end;
    padding-right: .2rem
  }
  .agree_img{
    width: 0.32rem;
    height: 0.32rem;
  }
</style>
